<template>
  <a-tabs default-active-key="1" type="card">
    <a-tab-pane key="1" tab="概念">
      <s-table
        style="padding: 12px 12px 0"
        :rowKey="(record) => record.index"
        :data="loadRelation"
        :columns="relation_column">
        <template slot="action">
          <a>查看json数据</a>
        </template>
      </s-table>
    </a-tab-pane>
    <a-tab-pane key="2" tab="关系">
      <s-table
        style="padding: 12px 12px 0"
        :rowKey="(record) => record.index"
        :data="loadEdges"
        :columns="edges_columns">
        <template slot="action">
          <a>查看json数据</a>
        </template>
      </s-table>
    </a-tab-pane>
  </a-tabs>
</template>

<script>

import { statisticsGraph } from '@/api/modular/main/knowl/graph_preview/graphPreviewManager'
import { STable } from '@/components'

export default {
  name: 'Index',
  components: {
    STable
  },
  data() {
    return {
      activeKey: '1',
      loadRelation: (parameter) => {
        return statisticsGraph({}).then((res) => {
          const vertexs = res.data.vertexs
          for (let i = 0; i < vertexs.length; i++) {
            vertexs[i].index = i + 1
          }
          return {
            rows: vertexs,
            totalRows: vertexs.length,
            pageSize: parameter.pageSize,
            pageNo: parameter.pageNo,
            totalPage: vertexs.length / parameter.pageSize
          }
        })
      },
      loadEdges: (parameter) => {
        return statisticsGraph({}).then((res) => {
          const edges = res.data.edges
          for (let i = 0; i < edges.length; i++) {
            edges[i].index = i + 1
          }
          return {
            rows: edges,
            totalRows: edges.length,
            pageSize: parameter.pageSize,
            pageNo: parameter.pageNo,
            totalPage: edges.length / parameter.pageSize
          }
        })
      },
      relation_column: [
        {
          title: '概念名称',
          dataIndex: 'schema.name',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '英文名',
          dataIndex: 'schema.synonym',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '实例数量',
          dataIndex: 'countSchema',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '操作',
          width: '200px',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      edges_columns: [
        {
          title: '关系名称',
          dataIndex: 'relation.chName',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '英文名',
          dataIndex: 'relation.enName',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '概念A',
          dataIndex: 'schemaA.name',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '概念B',
          dataIndex: 'schemaB.name',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '关系数量',
          dataIndex: 'countRelation',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '操作',
          align: 'center',
          width: '200px',
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  }
}
</script>

<style scoped lang="less">
.ant-tabs-tab {
  font-weight: 700;
  font-size: 15px;
}

.ant-tabs-nav .ant-tabs-tab-active {
  font-weight: 700;
  font-size: 15px;
}
</style>
